<template>
  <view class="notice">
    <view class="noticeTab flex flex-align">
      <view class="tabItem flex-1 flex flex-align flex-center" :class="{active:tabIndex==0}" @click="tabInd(0)">
        <image :src="tabIndex==0?'/static/notice/notice03.png':'/static/notice/notice09.png'" mode="scaleToFill" />
        <view>系统公告</view>
      </view>
      <view class="tabItem flex-1 flex flex-align flex-center" :class="{active:tabIndex==1}" @click="tabInd(1)">
        <image :src="tabIndex==1?'/static/notice/notice07.png':'/static/notice/notice04.png'" mode="scaleToFill" />
        <view>活动推送</view>
      </view>
      <view class="tabItem flex-1 flex flex-align flex-center" :class="{active:tabIndex==2}" @click="tabInd(2)">
        <image :src="tabIndex==2?'/static/notice/notice08.png':'/static/notice/notice05.png'" mode="scaleToFill" />
        <view>订单消息</view>
      </view>
    </view>
    <view style="height: 88rpx;"></view>
    <view class="noticeList">
      <view class="list" v-for="(item,index) in 10" :key="index">
        <view class="list-img" v-if="index==3">
          <image src="@/static/notice/notice10.png"  mode="widthFix"  />
        </view>
        <view style="padding: 20rpx 20rpx 30rpx;">
          <view class="list-title flex flex-align flex-bt">
            <view class="title-one"> 微宝优选2号店盛大开业！ </view>
            <image src="@/static/notice/notice06.png" mode="scaleToFill" />
          </view>
          <view class="content two-omit">
            各位亲爱的用户，非常抱歉，我们的平台将在8月21日开启维护，维护期间您将无法登录，维护的时长为6小时…
          </view>
          <view class="list-bttom flex flex-align flex-bt">
            <view class=" flex flex-align">
              <image src="@/static/notice/notice02.png" mode="scaleToFill" />
              <view>2023-08-10</view>
            </view>
            <view class="flex flex-align">
              <view class="black">查看详情</view>
              <image src="@/static/notice/notice01.png" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
      <view class="list">
        <view style="padding: 20rpx 20rpx 30rpx;">
          <view class="list-title flex flex-align flex-bt">
            <view class="title-one"> 订单待提货通知 </view>
            <image src="@/static/notice/notice06.png" mode="scaleToFill" />
          </view>
        </view>
        <view class="list-shop flex">
          <view class="leftImg">
            <image src="@/static/home/home_12.png" mode="scaleToFill" />
          </view>
          <view class="flex flex-direction flex-bt rightContent">
            <view>
              <view class="title one-omit">妮娜皇后葡萄妮娜皇后葡萄新鲜水果云南新鲜水果云南</view>
              <view class="miaoshu one-omit">全金属系统全金属系统直击深层肌肉群，冷热直击深层肌肉群，冷热</view>
            </view>
            <view class="flex flex-bt flex-align">
              <view class="price">2022.08.21 14:30</view>
              <view class="sockbtn">查看订单</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const tabIndex = ref(0)
const tabInd = (index:number) => {
  tabIndex.value = index
}
</script>

<style scoped lang="scss">
  .noticeTab{
    height: 88rpx;position: fixed;top:0;left:0;z-index: 111;width: 100%;background:#F5F6F7;
    .tabItem{
      color: #969799;
      height: 88rpx;
      font-size: 28rpx;
      color: #333;
      image{
        width: 48rpx;height: 48rpx;margin-right: 5rpx;
      }
      &.active{
        color: #333;
        background-color: #fff;font-weight: bold;
      }
   }
  }
  .noticeList{padding: 30rpx;
    .list{ background-color: #fff;border-radius: 20rpx;margin-bottom: 20rpx;
      .list-img{
        image{width: 100%;border-radius: 16rpx;}
      }
      .list-title{
        .title-one{width: 500rpx;}
        font-size: 30rpx;color: #333;font-weight: bold;
        image{width: 86rpx;height: 24rpx;}
      }
      .content{font-size: 28rpx;color: #969799;margin-top: 20rpx;}
     .list-bttom{margin-top: 20rpx;
       .flex{
         font-size: 28rpx;color: #969799;
         image{width: 32rpx;height: 32rpx;margin-left: 5rpx;}
         .black{color: #323332;}
       }
     }
     .list-shop{padding: 0 26rpx 30rpx;
      margin-bottom: 20rpx;
      .rightContent{width: 500rpx;}
      image{width: 140rpx;height: 140rpx;margin-right: 20rpx;}
      .miaoshu{color: #969799;font-size: 24rpx;margin-top: 10rpx;}
      .price{color:#969799;font-size: 24rpx;}
      .sockbtn{
        color: #fff;font-size: 24rpx;background: linear-gradient(to right,#FE9640,#FE7431);border-radius: 60rpx;padding: 14rpx 40rpx;
      }
     }
    }
   

  }
</style>